<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>progress</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
		<link href="../css/bootstrap.min.css" />
		<script src="../js/jquery-3.3.1.slim.min.js"></script>
	</head>
	<body>
		<div class="progress" >
            <div class="progress-bar bg-info" id="testProgress" role="progressbar" style="width: 1%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
		<div>
			<button class="btn-secondary" onclick="testProgress()">click</button>
		</div>
	</body>
	<script type="text/javascript">
		var beg = 0;
		function testProgress() {
			if (beg < 50) {
				beg++;
				console.log(beg);
				$("#testProgress").css("width",beg * 2+ "%");
			}
		}
		setInterval("testProgress()","300");
	</script>
</html>
